<template>
  <div class="nav">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      :router="true"
      @select="handleSelect"
    >
      <el-menu-item index="/index" style="height: 58px">
        <img src="@/assets/shop_logo.svg" style="width: 25px" alt="" />
      </el-menu-item>

      <div class="option-box">
        <div class="option-cell" @click="changeIsCollapse()">
          <el-icon style="cursor: pointer" size="23"><Guide /></el-icon>
        </div>
        <div class="option-cell" @click="refresh()">
          <el-icon style="cursor: pointer" size="23"><Refresh /></el-icon>
        </div>
      </div>
      <div class="flex-grow" />

      <div class="option-box" style="width: 50px">
        <div class="option-cell" @click="changeScreen()">
          <el-icon size="20"><FullScreen /></el-icon>

          <!-- <el-icon size="20"><Aim /></el-icon> -->
        </div>
      </div>
      <el-sub-menu index="5">
        <template #title>
          <!-- <el-avatar
                        class="mr-3"
                        :size="32"
                        src="@/assets/head_portrait_man.svg"
                    /> -->
          <el-avatar :size="30" style="background: #eee; margin-right: 10px">
            <img
              src="@/assets/head_portrait_man.svg"
              style="width: 20px"
              alt=""
            />
          </el-avatar>
          {{ user_name }}
        </template>
        <el-menu-item @click="login_out">退出登录</el-menu-item>
        <el-menu-item index="/users" @click="set_tab('角色管理', '/users')"
          >修改个人信息</el-menu-item
        >
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { Guide, Refresh, FullScreen, Aim } from "@element-plus/icons-vue";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import screenfull from "screenfull";
import { useStore } from "vuex";
import { set_tab } from "../../../common/utils";

const router = useRouter();
const store = useStore();

const activeIndex = ref(sessionStorage.getItem("navIndex") || "1");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
  sessionStorage.setItem("navIndex", key);
};

// 刷新页面
const refresh = () => {
  window.location.reload();
};
// 折叠展开左侧菜单栏
const changeIsCollapse = () => {
  let collapse = store.state.menuCollapse;
  store.dispatch("handleMenuCollapse", !collapse);
};
// 展开全屏 关闭全屏
const isFullScreen = ref(false);
const changeScreen = () => {
  screenfull.toggle();
};

const user_name = ref(
  (store.state && store.state.user_info && store.state.user_info.user_name) ||
    ""
);

// 退出登录
const login_out = () => {
  // 清空登录操作的数据
  store.dispatch("handlerTabsList", [{ title: "概述", name: "/index" }]);
  store.dispatch("handlerTabsActiveName", "/login");
  // store.dispatch("save_user_info", null);
};
</script>

<style lang="scss">
.flex-grow {
  flex-grow: 1;
}

.option-box {
  width: 95px;
  display: flex;
  justify-content: space-between;
  height: 58px;
  margin-left: 135px;

  .option-cell {
    width: 45px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.5s;
  }

  .option-cell:hover {
    background: #ecf5ff;
  }
}
</style>